<template>
  <div>
    <!-- 订单确认页面的子组件 -->
    <!-- 对话框中需要添加的内容 -->
    <el-form :model="address"
             :rules="rules"
             ref="ruleForm"
             label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="收货人"
                    prop="accept">
        <el-input v-model="address.accept"></el-input>
      </el-form-item>
      <el-form-item label="联系电话"
                    prop="cellphone">
        <el-input v-model="address.cellphone"></el-input>
      </el-form-item>

      <el-form-item label="省份"
                    prop="province">
        <el-select v-model="address.province"
                   placeholder="请选择省份"
                   @change="selectedPro"
                   value-key="id">
          <el-option :label="province.name"
                     :value="province"
                     v-for="province in provinceList"
                     :key="province.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市"
                    prop="city">
        <el-select v-model="address.city"
                   placeholder="请选择城市"
                   @change="selectedCity"
                   value-key="id">
          <el-option :label="city.name"
                     :value="city"
                     v-for="city in cityList"
                     :key="city.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区县"
                    prop="county">
        <el-select v-model="address.county"
                   placeholder="请选择区县"
                   @change="selectedCounty"
                   value-key="id">
          <el-option :label="county.name"
                     :value="county"
                     v-for="county in countyList"
                     :key="county.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址"
                    prop="detailaddress">
        <el-input type="textarea"
                  v-model="address.detailaddress"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12" :offset="12" style="text-align: right">
              <el-button type="info" @click="cancel" >取 消</el-button>
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="submitAddr">确 定</el-button>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //省市区的下拉选项框
      provinceList: [],
      cityList: [],
      countyList: [],
      //label的值
      address: {
        accept: '',
        cellphone: '',
        province: '',
        city: '',
        county: '',
        detailaddress: ''
      },
      rules: {
        accept: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
        ],
        cellphone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            pattern:
              '^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$',
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ],
        province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        county: [{ required: true, message: '请选择区县', trigger: 'blur' }],
        detailaddress: [
          { required: true, message: '请输入详细地址', trigger: 'change' },
          { min: 10, max: 100, message: '长度在10到100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //省市区三级联动
    selectedPro(val) {  
      //当选中数据发生改变时，清理市、区的信息
      this.address.city=''
      this.address.county=''
      //当省份被选中时，获取对应的city
      this.cityList = val.children
    },
    selectedCity(val) {
      //当选中数据发生改变时，清理区县的信息
      this.address.county=''
      this.countyList = val.children
    },
    selectedCounty(val){
      console.log(this.address)
    },
    reset(){//清空表单
      this.address={}
    },

    cancel(){//取消--关闭对话框
      //通过自定义事件的方式，实现向上反馈结果(emit:发射)
      this.$emit("close")
    },

    submitAddr(){
      //1.将address对象进行copy
      let temp = JSON.parse(JSON.stringify(this.address))
      //2.收集需要的参数，以免影响data中的数据
      temp.province = temp.province.name
      temp.city = temp.city.name
      temp.county = temp.county.name
      //尽量不要在子组件发请求进行增删改等操作：因为这样的子组件就没有了复用的作用
      //可以通过自定义事件传数据给父组件
      this.$emit("submitAddr",temp)
      console.log(temp)
    }
  },
  mounted() {
    //先只请求省份信息--数据量大的时候，选择分开发请求
    this.$axios.get('/address/getPccList').then(res => {
      console.log(res.data)
      this.provinceList = res.data.data
    })
  }
}
</script>
<style scoped>
</style>

